<template>
  <div class="mobile-frame">
    <van-nav-bar>
      <template #title>
        <van-search label="上架 " left-icon="" v-model="qrcode_str" placeholder="扫描条码" @search="onSearch" />
      </template>
      <template #right> </template>
    </van-nav-bar>
    <div style="padding-top: 10px; height: calc(100% - 42px - 54px); overflow: auto">
      <van-cell-group inset>
        <van-field readonly :label="qrdoc.location?.code || '库位'">
          <template #label>
            <van-tag v-if="qrdoc.location?.store_state === e_store_state.空闲" type="primary">空闲</van-tag>
            <van-tag v-if="qrdoc.location?.store_state === e_store_state.轻载" type="success">轻载</van-tag>
            <van-tag v-if="qrdoc.location?.store_state === e_store_state.重载" type="warning">重载</van-tag>
            <van-tag v-if="qrdoc.location?.store_state === e_store_state.满载" type="danger">满载</van-tag>
            <van-tag v-if="qrdoc.location?.block_in" type="danger">禁入</van-tag>
          </template>
          <template #input>
            <span v-if="qrdoc.location">{{ qrdoc.location.code }}</span>
            <span v-else>库位</span>
          </template>
        </van-field>
      </van-cell-group>
      <van-divider />

      <van-list finished-text="没有更多了">
        <van-cell
          v-for="item in qrdoc.details"
          :key="item.qrcode"
          :title="item.materialcode"
          :label="item.materialname"
          :value="item.qty"
        />
      </van-list>
    </div>
    <van-button type="primary" block @click="submit">提交</van-button>
  </div>
</template>
<script lang="ts" setup>
import { useDbStore } from '@/stores/modules/database'
import { ref } from 'vue'
import { showDialog, showConfirmDialog } from 'vant'
import { get_code_prefix, store_tag_check, store_type_check, sum } from '@/utils/common'
import { e_code_prefix, e_material_storage_status, e_move_status, e_store_state, e_store_type } from '@/types/enum'
import type { bd_location, bd_material } from '@/types/basedata'
import type { pd_qrcode } from '@/types/producedata'
interface t_qrdoc_detail {
  qrcode: string
  materialcode: string
  materialname: string
  qty: number
  doc: pd_qrcode
}
interface t_qrdoc {
  location?: bd_location
  locationname: string
  details: t_qrdoc_detail[]
}
const db = useDbStore()

const qrcode_str = ref<string>()
const qrdoc = ref<t_qrdoc>({
  locationname: '',
  details: []
})
const clearQrDoc = () => {
  qrdoc.value = {
    locationname: '',
    details: []
  }
}
const onSearch = () => {
  const type = get_code_prefix(qrcode_str.value!)
  const content = trimPrefix(qrcode_str.value!)
  qrcode_str.value = ''
  if (e_code_prefix[type as keyof typeof e_code_prefix] === e_code_prefix.库位) {
    searchLocation(content)
  } else if (e_code_prefix[type as keyof typeof e_code_prefix] === e_code_prefix.物码) {
    searchQr(content)
  } else if (e_code_prefix[type as keyof typeof e_code_prefix] === e_code_prefix.搬运单) {
    searchMv(content)
  } else {
    showDialog({ title: '错误', message: '不正确的条码' })
  }
}
const trimPrefix = (str: string) => {
  const indexOf = str.indexOf('#')
  return str.substring(indexOf + 1, str.length)
}
const searchMv = (key: string) => {
  const mv = db.move.find((r) => r.billcode === key)
  if (!mv) {
    showDialog({ title: '错误', message: '不正确的搬运号' })
    return
  }
  if (mv.status !== e_move_status.就绪) {
    showDialog({ title: '错误', message: '不正确的单据状态' })
    return
  }
  searchLocation(mv.location.barcode)
  mv.items.forEach((r) => {
    searchQr(r.qrcode.qrcode)
  })
}

const searchLocation = (key: string) => {
  const loc = db.location.find((r) => r.barcode === key)
  if (!loc) {
    showDialog({ title: '错误', message: '不正确的库位号' })
    return
  }
  if (loc.block_in) {
    showDialog({ title: '错误', message: '这个库位不允许继续添加了' })
    return
  }
  if (qrdoc.value.location?.barcode !== key && qrdoc.value.details.length > 0) {
    showConfirmDialog({ title: '提示', message: '切换库位会清空条码内容' })
      .then(() => {
        qrdoc.value.location = loc
        qrdoc.value.details = []
        qrdoc.value.locationname = loc.code
      })
      .catch(() => {
        return
      })
  }
  qrdoc.value.location = loc
  qrdoc.value.locationname = loc.code
}
const searchQr = (key: string) => {
  if (!qrdoc.value.location) {
    showDialog({ title: '错误', message: '先确认库位' })
    return
  }
  const doc = db.qrcode.find((r) => r.qrcode === key)
  if (!doc) {
    showDialog({ title: '错误', message: '找不到这个物码' })
    return
  }
  const material = typeof doc.material === 'string' ? db.material.find((r) => r.code === doc.material) : doc.material
  if (!material) {
    showDialog({ title: '错误', message: '根据物码找不到物料档案' })
    return
  }
  if (
    !store_type_check(qrdoc.value!.location.store_type, material.store_type) ||
    !store_tag_check(qrdoc.value!.location.store_tags, material.store_tag)
  ) {
    showDialog({ title: '错误', message: '该库位不能存放这类物品' })
    return
  }
  if (qrdoc.value.details.find((r) => r.qrcode === key)) {
    showDialog({ title: '错误', message: '重复扫描' })
    return
  }
  qrdoc.value.details.push({
    doc: doc,
    qty: doc.qty,
    materialcode: material.code,
    materialname: material.name,
    qrcode: key
  })
}
const submit = () => {
  const location = qrdoc.value.location!
  qrdoc.value.details.forEach((r) => {
    r.doc.location = qrdoc.value!.location!.barcode
    r.doc.status = e_material_storage_status.上架
  })
  const all_code_in_location = db.qrcode.filter((r) => r.location === location.barcode)
  const all_volumn = sum(all_code_in_location.map((r) => r.h * r.l * r.w))
  location.use_volumn = all_volumn
  const use_per = location.use_volumn / location.total_volumn
  if (use_per <= 0.25) location.store_state = e_store_state.空闲
  else if (use_per <= 0.5) location.store_state = e_store_state.轻载
  else if (use_per <= 0.75) location.store_state = e_store_state.重载
  else location.store_state = e_store_state.满载
  db.saveQrCode()
  db.saveLocation()
  clearQrDoc()
}
</script>
